<template>
	<view class="indexs">
		<view class="header header_lan" :style="'padding-top: ' + navH + 'px;'">
			<view class="header_height"
				:style="'height:' + gaodu + 'px;line-height:' + gaodu + 'px;top:' + gaodutops + 'px;'">
				<view class="index_h_cont3">
					<view class="index_wenben_img" @tap="jumpzuo">
						<image :src="imgUrl + '/dzx_img22.png'" mode="widthFix"></image>
					</view>
					<view class="index_wenben baise">{{ $t('page_sharing_order.My_group') }}</view>
				</view>
			</view>
			<view class="coloe_title">s</view>
		</view>
		<view class="index_center" :style="'padding-top:' + (navH + 50) + 'px;'">
			<view class="my_dingdan_center">
				<view class="index_cardingdan">
					<view class="index_swiper">
						<!--Tab布局-->
						<view class="index_title">
							<block v-for="(item, index) in malllist" :key="index">
								<view :data-id="index" :data-type="item.type"
									:class="'mall_dis ' + (currentIndex == index ? 'mall_on' : '')" @tap="getcurrentid">
									<view class="mall_t1">{{ item.name }}</view>
								</view>
							</block>
							<view class="mys_xians_po" :style="'width:' + width + 'px;left:' + left + 'px;'">
								<view class="mys_xians"></view>
							</view>
						</view>
						<!--内容布局-->
						<view class="index_list">
							<swiper class="swiper paid_list_cont" @change="pagechange" :current="currentIndex"
								:style="'height:' + height + ';'">
								<block v-for="(item, index) in malllist" :key="index">
									<swiper-item>
										<view :class="'index_list_heji' + index">
											<view class="pintuan_dingdan_items_list" v-if="arrlist.length != 0">
												<view class="pintuan_dingdan_items" v-for="(item, index1) in arrlist"
													:key="index1">
													<view class="pintuan_dingdan_items_top">
														<view class="pintuan_dingdan_items_l">
															<image :src="imgUrl + '/dzx_img27.png'"></image>
															<text>{{ item.order['order_sn'] }}</text>
														</view>
														<view class="pintuan_dingdan_items_r">{{ item.status.text }}
														</view>
													</view>
													<view class="pintuan_dingdan_items_center">
														<view class="pintuan_dingdan_items_conts">
															{{ group_size }}
															<text>{{ item.order.max_people }}{{ renshu }}</text>
														</view>
														<view class="pintuan_dingdan_items_conts">
															{{ $t('page_sharing_order.qszl') }}
															<text>{{ item.order.min_weight }}{{ weight_mode.unit }}</text>
														</view>
														<view class="pintuan_dingdan_items_conts">
															{{ opening_time }}
															<text>{{ item.order.start_time }}</text>
														</view>
														<view class="pintuan_dingdan_items_conts">
															{{ collection_waybill_number }}
															<text>{{ item.package.order_sn }}</text>
														</view>
														<view class="pintuan_dingdan_items_conts">
															{{ receiving_address }}
															<text>{{ item.package.address.country }}-{{ item.package.address.province }}-{{ item.package.address.detail }}</text>
														</view>
													</view>
													<view class="pintuan_dingdan_items_bottom">
														<view class="pintuan_dingdan_items_btns1"
															:data-id="item.order_item_id"
															v-if="item.status.value <= 2 && item.status.value != 9"
															@click="quxiaodingdan">
															{{ cancel_order }}
														</view>
														<view class="pintuan_dingdan_items_btns2"
															:data-item_id="item.order_item_id"
															:data-id="item.order.order_id" @click="goOrderDetail">
															{{ check_the_details }}
														</view>
													</view>
												</view>
											</view>
											<view class="my_dingdan_zanwu" v-else>
												<image :src="imgUrl + '/dzx_img43.png'"></image>
												<text>{{ $t('page_sharing_order.no_order_yet') }}</text>
											</view>
										</view>
									</swiper-item>
								</block>
							</swiper>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// pages/shouye/shouye_zkc/shouye_zkc.js
	const app = getApp();

	let request = require('../../utils/require');

	export default {
		data() {
			const group_size = this.$t('page_sharing_order.Group_size')
			const renshu = this.$t('page_sharing_order.renshu')
			const opening_time = this.$t('page_sharing_order.Opening_time')
			const collection_waybill_number = this.$t('page_sharing_order.collection_waybill_number')
			const receiving_address = this.$t('page_sharing_order.Receiving_address')
			const cancel_order = this.$t('page_sharing_order.cancel_order')
			const check_the_details = this.$t('page_sharing_order.check_the_details')
			return {
				navH: app.globalData.navHeight,
				gaodu: app.globalData.height,
				gaodutops: app.globalData.top,
				imgUrl: app.globalData.imgUrl,
				weight_mode: uni.getStorageSync('weight_mode'),
				malllist: [{
						id: 1,
						name: '全部',
						type: 0
					},
					{
						id: 2,
						name: '拼团中',
						type: 'sharing'
					},
					{
						id: 3,
						name: '待付款',
						type: 'no_pay'
					},
					{
						id: 4,
						name: '待发货',
						type: 'no_send'
					},
					{
						id: 5,
						name: '待收货',
						type: 'received'
					},
					{
						id: 6,
						name: '已完成',
						type: 'complete'
					}
				],

				height: 0,
				heights: 0,
				currentIndex: 0,
				left: 16,
				false: false,
				width: 0,
				//分页
				page: 1,
				ispage: true,
				arrlist: [],
				type: 0,
				isSwiper: false,
				optionsid: '',
				swipertrue: false,
				swipershow: false,
				group_size,
				renshu,
				opening_time,
				collection_waybill_number,
				receiving_address,
				cancel_order,
				check_the_details

			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			var that = this;
			that.optionsid= options.id
			that.type= options.type
			that.page= 1
			that.ispage= true
			that.arrlist= []
			that.swipertrue= false
		},
		onShow() {
			var that = this;
			console.log(that.type, 'that.data.type');
			that.currentIndex= that.optionsid ?? 0,
			that.page= 1,
			that.ispage= true,
			that.arrlist= [],
			that.isSwiper= true
			that.sharinglist(that.type);
			that.changeline();
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			if (this.ispage) {
				this.page= this.page + 1
				this.sharinglist(this.type);
			}
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			qupinglun(e) {
				uni.navigateTo({
					url: '/pages/indexs/my_dingdan_qpj/my_dingdan_qpj?id=' + e.currentTarget.dataset.id
				});
			},
			goOrderDetail(e) {
				uni.navigateTo({
					url: '/pages/sharing/sharing_order_detail?order_id=' + e.currentTarget.dataset.id +
						'&item_id=' + e.currentTarget.dataset.item_id
				});
			},
			querenqianshou(e) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确认签收该包裹？',
					success(res) {
						if (res.confirm) {
							var data = {
								token: uni.getStorageSync('token'),
								id: e.currentTarget.dataset.id
							};
							request.post(`index.php?s=/api/package/signedin&wxapp_id=` + uni.getStorageSync(
								'web_id'), data).then(res => {
								if (res.data.code == 1) {
									uni.showToast({
										title: res.data.data
									});
									setTimeout(() => {
										that.page= 1
										that.ispage= true
										that.arrlist=[]
										that.sharinglist(that.type);
									}, 1000);
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									});
								}
							});
						} else {
							if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					}
				});
			},
			// quzhifu(e) {
			//     var that = this;
			//     uni.showModal({
			//         title: '提示',
			//         content: '确认是否支付？',

			//         success(res) {
			//             if (res.confirm) {
			//                 var data = {
			//                     token: uni.getStorageSync('token'),
			//                     id: e.currentTarget.dataset.id
			//                 };
			//                 request.post(`index.php?s=/api/package/doPay&wxapp_id=` + uni.getStorageSync('web_id'), data).then((res) => {
			//                     if (res.data.code == 1) {
			//                         uni.showToast({
			//                             title: res.data.data
			//                         });
			//                         setTimeout(() => {
			//                             that.page= 1
		//                                 that.ispage= true
		//                                 that.arrlist= []
			//                             that.baoguolist(that.type);
			//                         }, 1000);
			//                     } else {
			//                         uni.showToast({
			//                             title: res.data.msg,
			//                             icon: 'none'
			//                         });
			//                     }
			//                 });
			//             } else {
			//                 if (res.cancel) {
			//                     console.log('用户点击取消');
			//                 }
			//             }
			//         }
			//     });
			// },

			//取消订单
			quxiaodingdan(e) {
				var that = this;
				var data = {
					token: uni.getStorageSync('token'),
					id: e.currentTarget.dataset.id
				};
				uni.showModal({
					title: '提示',
					content: '确认取消本次拼团吗？',
					success(res) {
						if (res.confirm) {
							request.post(`index.php?s=/api/sharp.order/cancle&wxapp_id=` + uni.getStorageSync(
								'web_id'), data).then(res => {
								if (res.data.code == 1) {
									uni.showToast({
										title: res.data.data
									});
									setTimeout(() => {
										that.page= 1
										that.ispage= true
										that.arrlist= []
										that.sharinglist(that.type);
									}, 1000);
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									});
								}
							});
						} else {
							if (res.cancel) {}
						}
					}
				});
			},

			sharinglist(e) {
				var that = this;
				console.log(this.currentIndex, 'currentIndex');
				var data = {
					type: e,
					token: uni.getStorageSync('token'),
					page: that.page
				};
				request.get(`index.php?s=/api/sharp.order/list&wxapp_id=` + uni.getStorageSync('web_id'), data).then(
					res => {
						if (res.data.code == 1) {
							if (that.page > res.data.data.list.last_page) {
								that.ispage= false
							} else {
								that.arrlist= that.arrlist.concat(res.data.data.list.data)
							}
							setTimeout(() => {
								console.log(that.currentIndex, 'currentIndex');
								that.swiperhegiht(that.currentIndex);
							}, 100);
						}
					});
			},

			chakanxq(e) {
				uni.navigateTo({
					url: '/pages/indexs/my_dingdan_details/my_dingdan_details?id=' + e.currentTarget.dataset.id
				});
			},

			//swiper切换时会调用
			pagechange: function(e) {
				var that = this;
				console.log(e, 'ee???');
				setTimeout(() => {
					that.currentIndex= e.detail.current
					that.type= that.malllist[e.detail.current].type
					that.page= 1
					that.ispage= true
					that.arrlist= []
					that.optionsid= e.detail.current
					that.swipershow= true
					that.changeline();
					that.sharinglist(that.type);
				}, 100);
			},

			//swiper单击事件
			getcurrentid(e) {
				this.currentIndex= e.currentTarget.dataset.id
			},

			//swiper选项卡的高度
			swiperhegiht(es) {
				var that = this;
				var query = uni.createSelectorQuery();
				query.selectAll('.index_list_heji' + es).boundingClientRect();
				query.exec(res => {
					console.log(res, 9999);
					var listHeight = res[0][0].height;
					that.height= listHeight + 'px',
					that.heights= res[0]
				});
			},

			//下标线左右滑动效果
			changeline: function(e) {
				const query = uni.createSelectorQuery();
				var that = this;
				console.log(e);
				query.select('.mall_on').boundingClientRect();
				query.exec(function(res) {
					console.log(res, '????');

					if (res[0] != null) {
						that.left= res[0].left
						that.width= res[0].width
					} else {
						that.left= 0
					}
				});
			},

			jumpzuo() {
				uni.navigateBack();
			}
		}
	};
</script>
<style>
	@import './sharing_order.css';
</style>